@import './commonM/_crumbs.less';
@import './commonM/_imgDetail.less';
@import './commonM/_productBox.less';
@import './commonPC/_search.less';
@import './commonPC/_page.less';


.home-box{
    margin: 40px auto 0;
    
}
.crumbs{
    display: none;
}
#infscr-loading {
    bottom: -10px;
    left: 50%;
    position: absolute;
    text-align: center;
    height: 20px;
    line-height: 20px;
    z-index: 100;
    width: 60px;
    margin-left: -30px;
    img{
        width: 60px;
        display: inline-block;
    }
  }

/*左右布局*/
.column-product{
    display: flex;
    justify-content: space-between;
    margin-top: 66px;
}
.column-product-left{
    display: none;
    
}
.column-product-right{
    width: 100%;
}
.column-product-left{
    .sub-list{
		width:280px;
		background:rgba(248,251,254,0.8);
		border-radius: 10px;
		padding:24px 16px;
		margin: 0 0 24px 0;
        box-sizing: border-box;
		h5{
			font-family: Roboto-Bold;
            font-weight: bold;
			font-size: 18px;
			color: #121212;
			line-height: 28px;
			margin: 0 0 24px 0;
            padding-left: 33px;
            box-sizing: border-box;
		}
        h5.best-brands{
            background: url(../images/product/ic_brands@2x.png) no-repeat center left/21px auto;
        }
        h5.best-products{
            background: url(../images/product/ic_products@2x.png) no-repeat center left/21px auto;
        }
        h5.quick-links{
            background: url(../images/product/ic_links@2x.png) no-repeat center left/21px auto;
        }
		li{
			font-size: 16px;
            font-family: Roboto-Regular;
            font-weight: 400;
            line-height: 20px;
			color: #666666;
			margin: 0 0 24px 0;
			&.current{
				a{color:#177FE9;}
			}
		}
	}
	.current{
		&.quick-list{
			display: block;
		}
	}
	.quick-list{
		display: none;
		li{
			cursor: pointer;
			&.current{
				color:#177FE9;
			}
		}
	}
}
.column-product-right{
    .title{
		display: flex;
		margin: 0 0 15px 0;
		align-items: center;
        justify-content: space-between;
		h3{
			width: 290px;
            height: 42px;
            font-size: 18px;
            font-family: Roboto-Medium;
            font-weight: 500;
            color: #333333;
            line-height: 21px;
            display: flex;
            align-items: center;
		}
		.attention{
			background: url("../images/index/mobile/favorite@3x.png");
			background-size:20px 20px;
			width: 20px;
			height: 20px;
			&.favorited{
				background:url('../images/index/mobile/favorited@3x.png');
				background-size:20px 20px;
			}
			
		}
	}
	.user{
		line-height: 28px;
		margin: 0;
        width: 100%;
        height: 28px;
        overflow: hidden;
		img{
			width:28px;
			height: 28px;
            float: left;
            border-radius: 10px;
            overflow: hidden;
		}
		.name{
            font-size: 12px;
            font-family: Roboto-Regular;
            font-weight: 400;
            color: #333333;
			margin: 0 0 0 8px;
            float: left;
			a{
				color:#177FE9;
			}
		}
		.time{
			font-size: 11px;
            font-family: Roboto-Regular;
            font-weight: 400;
            color: #999999;
            float: right;
		}
	}
	.abstract{
        font-size:12px;
        line-height:18px;
        font-family:'Roboto-Regular';
        p{
            margin-top: 12px;
        }
        a{
            color:#177FE9
        }
        &.div-ellipsis{
            overflow:hidden;
            position:relative;
            a{
                position:absolute;
                right:0;
                bottom:0;
                background-color:#fff;
                padding:0 0 0 20px;
            }
        }
    }
    .production-detail{
		background: #FFFFFF;
		padding: 30px 0;
		&.detail-ellipsis{
			.details{
				max-height: 120px;
				overflow: hidden;
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #333333;
                line-height: 24px;
                margin-top: 0;
			}
			.view-more{
				margin-top: -39px;
				i{
					display:inline-block;
					width:10px;
					height:5.8px;
					background-image: url("../images/index/down@2x.png");
					background-size:10px 5.8px;
					margin-left:8px;
				}
			}
		}
        .details{
            margin-top: 0;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #333333;
            line-height: 24px;
            p{
                margin-top: 12px;
            }
		}
		.view-more{
			font-family: Roboto-Medium;
			display: block;
			color: #177FE9;
			letter-spacing: 0.5px;
			text-align: center;
			background-image: linear-gradient(180deg, rgba(255,255,255,0.00) 0%, #FFFFFF 23%, #FFFFFF 59%, #FFFFFF 100%);
			height: 40px;
			line-height: 40px;
			text-align: center;
			background-size: 810px 40px;
		    position: relative;
            font-size: 14px;
            font-family: Roboto-Medium;
		    &.down{
		    	i{
		    		display:inline-block;
					width:10px;
					height:5.8px;
					background-image: url("../images/index/up@2x.png");
					background-size:10px 5.8px;
					margin-left:8px;
					vertical-align:middle;
		    	}
		    }
		}
	}
}
.line{
    width: 375px;
    height: 7px;
    background: #F7F7F7;
    margin-left: -24px;
}
.about-list{
    margin: 0;
    position: relative;
    ul{
        width: 100%;
        li{
            padding-left: 25px;
            line-height: 20px;
            margin-top:10px;
            font-size: 14px;
            font-family: Roboto-Regular;
            font-weight: 400;
            color: #333333;
            margin-bottom: 12px;
            &:first-child{
                margin: 0;
            }
        }
        &.about-list-ok{
            border-bottom: 1px solid #E4E4E4;
            
            li{
                background: url(../images/product/ic_1@2x.png) no-repeat 2px 4px;
                background-size: 14px auto;
            }
        }
        &.about-list-no{
            display: none;
            margin-top: 12px;
            border-bottom: 1px solid #E4E4E4;
            li{
                background: url(../images/product/ic_2@2x.png) no-repeat 2px 4px;
                background-size: 10px auto;
            }
        }
    }
}
.detail-box{
    position: relative;
    padding: 23px 0 16px;
    .num{
        position:absolute;
        left: 0;
        top:0;
        width: 60px;
        height: 35px;
        line-height: 23px;
        font-size: 14px;
        background: #FA3D5B;
        border-radius: 17.5px 17.5px 17.5px 0;
        color: #fff;
        font-family: Roboto-Medium;
        font-weight: 500;
        text-align: center;
        display: block;
        z-index: 1;
    }
    .num.num2{
        background: #DC3BFF;
    }
    .num.num3{
        background: #FFAA4A;
    }
    .num.num4{
        background: #177FE9;
    }
    .detail-imgtext{
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        .detail-img{
            width: 110px;
            a{
                width: 110px;
                height: 110px;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                border:1px solid #E7F2FC;
                border-radius: 8px;
                box-sizing: border-box;
                img{
                    width: 110px;
                    height: 110px;
                    display: block
                }
            }
            .star{
                width: 110px;
                justify-content: center;
                display: flex;
                margin-top: 6px;
                .blue,.half,.gray{
                    width: 15px;
                    height: 15px;
                    background-size: 15px 15px;
                    margin:0 1px 0 0;
                    display: inline-block;
                }
                .blue{
                    background-image: url("../images/0BF31614-20FC-4D52-BFC5-691D6EAE7B03@2x.png");
                }
                .half{
                    background-image: url("../images/331974AE-E488-435E-97BD-0A6849B35E40@2x.png");
                }
                .gray{
                    background-image: url("../images/95EA68AB-A5E8-4829-8E05-989D4C143461@2x.png");
                }
            }   
        }
        .detail-text{
            width: 207px;
            .title{
                margin: 8px 0 0;
                line-height: 12px;
                font-size: 12px;
                font-family: PlayfairDisplay-Black;
                font-weight: 900;
                color: #121212;
            }
            .tips{
                font-size: 16px;
                font-family: Roboto-Regular;
                font-weight: 400;
                color: #121212;
                line-height: 20px;
                height: 40px;
                display: flex;
                justify-content: space-between;
                margin-top: 8px;
                .star{
                    display: none;
                } 
            }
            .option{
                margin-top: 6px;
                line-height: 32px;
                display: flex;
                justify-content: space-between;
                p{
                    font-size: 11px;
                    font-family: Roboto-Regular;
                    font-weight: 400;
                    display: flex;
                    span{
                        opacity: .4;
                        color: #121212;
                        text-decoration:line-through;
                    }
                    span.curr{
                        font-size: 14px;
                        font-family: Roboto-Medium;
                        font-weight: 500;
                        color: #FF3164;
                        text-decoration: none;
                        opacity: 1;
                        margin-right: 8px;
                    }
                }
                .buy{
                    width: 80px;
                    height: 32px;
                    line-height: 30px;
                    background: #177FE9;
                    border-radius: 20px;
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    a{
                        font-size: 14px;
                        font-family: Roboto-Medium;
                        font-weight: 500;
                        color: #FFFFFF;
                        display: inline-block;
                    }
                }
            }
        }
    }
}
.recommend{
    font-size: 16px;
    font-family: Roboto-MediumItalic, Roboto;
    font-weight: normal;
    color: #121212;
    line-height: 16px;
	padding:8px 0 20px;
	border-top:1px solid #121212;
}
.recommend-more{
	display:block;
	margin:10px auto 20px
}
.best-list-box{
    padding-bottom: 20px;
    li{
        width: 100%;
        height: 40px;
        line-height: 40px;
        background:url(../images/product/mobile/arrow-down-s-line@3x.png) no-repeat 303px center;
        background-color: #F9FCFE;
        background-size: 8px auto;
        border-radius: 10px;
        margin-bottom: 10px;
        padding-left: 8px;
        box-sizing: border-box;
        a{
            font-size: 12px;
            font-family: Roboto-Medium;
            font-weight: 500;
            color: #177FE9;
            display: block;
        }
    }
}
.img-detail .item .tips a{
    font-family: Roboto-Regular;
}
.column-product-right .div-ellipsis{
    max-height: 48px;
}